<template>
  <div>
    <!-- 表头分页查询条件， shadow="never" 指定 card 卡片组件没有阴影 -->
    <el-card shadow="never" class="mb-5">
      <!-- flex 布局，内容垂直居中 -->
      <div class="flex items-center">
        <el-text>日程名称</el-text>
        <div class="ml-3 w-52 mr-5">
          <el-input v-model="scheduleName" placeholder="请输入（模糊查询）" />
        </div>

        <el-text>标签</el-text>
        <div class="ml-3 w-52 mr-5">
          <el-select v-model="tag" placeholder="请选择标签">
            <el-option
              v-for="item in options"
              :key="item.name"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </div>

        <el-text>创建日期</el-text>
        <div class="ml-3 w-30 mr-5">
          <!-- 日期选择组件（区间选择） -->
          <el-date-picker
            v-model="pickDate"
            type="daterange"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            :shortcuts="shortcuts"
            size="default"
            @change="datepickerChange"
          />
        </div>
        <el-button
          type="primary"
          class="ml-3"
          :icon="Search"
          @click="getTableData"
          >查询</el-button
        >
        <el-button class="ml-3" :icon="RefreshRight" @click="reset"
          >重置</el-button
        >
      </div>
    </el-card>
    <el-card shadow="never">
      <!-- 新增按钮 -->
      <div class="mb-5">
        <el-button type="primary" @click="openDialog()">
          <el-icon class="mr-1">
            <Plus />
          </el-icon>
          新增</el-button
        >
      </div>

      <!-- 分页列表 -->
      <el-table :data="tableData" border stripe table-layout="auto">
        <el-table-column prop="scheduleName" label="日程名称" />
        <el-table-column prop="tagId" label="标签">
          <template #default="scope">
            <el-tag type="success" v-if="scope.row.tagId == 1">工作学习</el-tag>
            <el-tag type="danger" v-if="scope.row.tagId == 2">浪费时间</el-tag>
            <el-tag type="success" v-if="scope.row.tagId == 3">睡觉</el-tag>
            <el-tag type="success" v-if="scope.row.tagId == 4">思考人生</el-tag>
            <el-tag type="warning" v-if="scope.row.tagId == 5">琐事</el-tag>
            <el-tag type="success" v-if="scope.row.tagId == 6">看书</el-tag>
            <el-tag type="success" v-if="scope.row.tagId == 7">休息运动</el-tag>
            <el-tag type="success" v-if="scope.row.tagId == 8">做饭</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="feeling" label="心情">
          <template #default="{ row }">
            {{ settleStatusEnum.getLabelByValue(row.feeling) }}
          </template>
        </el-table-column>
        <!-- <el-table-column prop="motivation" label="动机" /> -->
        <el-table-column label="总时长">
          <template #default="{ row }">
            {{ getDuration(row.createTime, row.endTime) }}
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="开始时间" />
        <el-table-column prop="endTime" label="结束时间" />
        <el-table-column label="操作">
          <template #default="scope">
            <el-tooltip
              class="box-item"
              effect="dark"
              content="详情"
              placement="bottom"
            >
              <el-button
                size="small"
                :icon="Tickets"
                circle
                @click="handleDetail(scope.row)"
              >
              </el-button>
            </el-tooltip>
            <el-tooltip
              class="box-item"
              effect="dark"
              content="编辑"
              placement="bottom"
            >
              <el-button
                size="small"
                @click="handleEdit(scope.row)"
                :icon="Edit"
                circle
              >
              </el-button>
            </el-tooltip>
            <el-tooltip
              class="box-item"
              effect="dark"
              content="删除"
              placement="bottom"
            >
              <el-button
                type="danger"
                size="small"
                @click="handleDelete(scope.row.id)"
                :icon="Delete"
                circle
              >
              </el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="mt-10 flex justify-center">
        <el-pagination
          v-model:current-page="current"
          v-model:page-size="size"
          :page-sizes="[10, 20, 50]"
          :small="false"
          :background="true"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="getTableData"
        />
      </div>
    </el-card>

    <!-- 添加日程 -->
    <el-dialog
      v-model="dialogVisible"
      :title="isEdit ? '编辑日程' : '新增日程'"
      width="40%"
      :draggable="true"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      @close="handleClose"
      @open="handleOpen"
    >
      <el-form ref="formRef" :rules="rules" :model="formData">
        <el-form-item label="标签" label-width="80px" size="large" required>
          <el-select v-model="formData.tagId" placeholder="请选择标签">
            <el-option
              v-for="item in options"
              :key="item.name"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="日程名称" label-width="80px" size="large" required>
          <el-autocomplete
            v-model="formData.scheduleName"
            :fetch-suggestions="querySearch"
            placeholder="请输入日程名称"
            class="w-full"
            @select="handleSelect"
            @input="handleInput"
            :trigger-on-focus="true"
            :loading="false"
            :popper-class="'no-loading'"
          />
        </el-form-item>
        <el-form-item 
          label="奖励积分" 
          label-width="80px" 
          size="large" 
          required
          v-if="[1, 6, 7, 8].includes(formData.tagId)"
        >
          <div class="reward-container">
            <div class="reward-value-wrapper" :class="{ 'animate': isAnimating }">
              <span class="reward-value">{{ formData.reward }}</span>
            </div>
            <el-button type="primary" @click="generateRandomReward" class="reward-btn">
              获取积分
            </el-button>
            <div class="reward-tip">
              <el-icon><InfoFilled /></el-icon>
              <!-- <span>金币计算规则：1-100随机数，数值越大奖励越多</span> -->
              <span>{{ formData.rewardDes }}</span>
            </div>
          </div>
        </el-form-item>
        <el-form-item
          v-if="formData.tagId == 2"
          label="动机"
          label-width="80px"
          size="large"
        >
          <el-autocomplete
            v-model="formData.motivation"
            :fetch-suggestions="queryMotivationSearch"
            placeholder="请输入动机"
            class="w-full"
            @select="handleMotivationSelect"
            @input="handleMotivationInput"
            :trigger-on-focus="true"
            :loading="false"
            :popper-class="'no-loading'"
          />
        </el-form-item>
        <el-form-item label="描述" label-width="80px" size="large">
          <el-input
            v-model="formData.scheduleDes"
            type="textarea"
            placeholder="请输入描述"
          />
        </el-form-item>
        <el-form-item label="心情" label-width="80px" size="large">
          <el-rate
            v-model="formData.feeling"
            :colors="colors"
            :texts="['丑陋', '不爽', '平淡', '开心', '伟大']"
            show-text
          />
        </el-form-item>
        <el-form-item
          label="开始时间"
          v-if="isEdit"
          label-width="80px"
          size="large"
        >
          <div class="block">
            <el-date-picker
              v-model="formData.createTime"
              type="datetime"
              placeholder="Select date and time"
            />
          </div>
        </el-form-item>
        <el-form-item
          label="结束时间"
          v-if="isEdit"
          label-width="80px"
          size="large"
        >
          <div class="block">
            <el-date-picker
              v-model="formData.endTime"
              type="datetime"
              placeholder="Select date and time"
            />
          </div>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleSubmit"> 提交 </el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 查看详情 -->
    <el-dialog
      v-model="isDetail"
      title="查看详情"
      width="40%"
      :draggable="true"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <el-form ref="formRef" :rules="rules" :model="formData" :disabled="true">
        <el-form-item label="日程名称" label-width="80px" size="large" required>
          <el-input
            v-model="formData.scheduleName"
            placeholder="请输入日程名称"
          />
        </el-form-item>
        <el-form-item label="标签" label-width="80px" size="large" required>
          <el-select v-model="formData.tagId" placeholder="请选择标签">
            <el-option
              v-for="item in options"
              :key="item.name"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          v-if="formData.tagId == 2"
          label="动机"
          label-width="80px"
          size="large"
        >
          <el-input v-model="formData.motivation" placeholder="请输入动机" />
        </el-form-item>
        <el-form-item label="描述" label-width="80px" size="large">
          <el-input
            v-model="formData.scheduleDes"
            type="textarea"
            placeholder="请输入描述"
          />
        </el-form-item>
        <el-form-item label="心情" label-width="80px" size="large">
          <el-rate
            v-model="formData.feeling"
            :colors="colors"
            :texts="['丑陋', '不爽', '平淡', '开心', '伟大']"
            show-text
          />
        </el-form-item>
        <el-form-item
          label="开始时间"
          v-if="isEdit"
          label-width="80px"
          size="large"
        >
          <div class="block">
            <el-date-picker
              v-model="formData.createTime"
              type="datetime"
              placeholder="Select date and time"
            />
          </div>
        </el-form-item>
        <el-form-item
          label="结束时间"
          v-if="isEdit"
          label-width="80px"
          size="large"
        >
          <div class="block">
            <el-date-picker
              v-model="formData.endTime"
              type="datetime"
              placeholder="Select date and time"
            />
          </div>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script setup>
// 引入所需图标
import {
  Check,
  Delete,
  Edit,
  Message,
  Search,
  Star,
  RefreshRight,
  Plus,
  Tickets,
  InfoFilled,
} from "@element-plus/icons-vue";
import { ref, reactive } from "vue";
import moment from "moment";
// import { showMessage } from '@/composables/util'
import {
  getScheduleList,
  createSchedule,
  updateSchedule,
  deleteSchedule,
  getScheduleTagList,
  getSchedulePage,
  getRecommend,
  getPoint
} from "@/api/schedule";
import { Enum } from "@/utils/enum";
import emitter from '@/utils/eventBus'

// 分页查询的分类名称
const scheduleName = ref("");
// 分页查询的分类名称
const tag = ref(null);
// 日期
const pickDate = ref("");

// 查询条件：开始结束时间
const startDate = reactive({});
const endDate = reactive({});

// 监听日期组件改变事件，并将开始结束时间设置到变量中
const datepickerChange = (e) => {
  startDate.value = moment(e[0]).format("YYYY-MM-DD");
  endDate.value = moment(e[1]).format("YYYY-MM-DD");

  console.log("开始时间：" + startDate.value + ", 结束时间：" + endDate.value);
};

const settleStatusEnum = new Enum()
  .add("UGLY", "丑陋", 1)
  .add("SHIT", "不爽", 2)
  .add("NORMAL", "平淡", 3)
  .add("HAPPY", "开心", 4)
  .add("GREAT", "伟大", 5);

const shortcuts = [
  {
    text: "最近一周",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
      return [start, end];
    },
  },
  {
    text: "最近一个月",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
      return [start, end];
    },
  },
  {
    text: "最近三个月",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
      return [start, end];
    },
  },
];

const colors = ref(["#99A9BF", "#F7BA2A", "#FF9900"]);

// 表格数据
const tableData = ref([]);
// 当前页码，给了一个默认值 1
const current = ref(1);
// 总数据量，给了个默认值 0
const total = ref(0);
// 每页显示的数据量，给了个默认值 10
const size = ref(10);
// 每页展示数量变更事件
const handleSizeChange = (chooseSize) => {
  size.value = chooseSize;
  getTableData();
};

//获取标签数据
function getTagData() {
  getScheduleTagList().then((res) => {
    if (res.data.success == true) {
      options.value = res.data.data;
      console.log("数据", res.data.data);
      console.log("options", options.value);
    }
  });
}
getTagData();

// 获取分页数据
function getTableData() {
  // 调用后台分页接口，并传入所需参数
  getSchedulePage({
    current: current.value,
    size: size.value,
    startDate: startDate.value,
    endDate: endDate.value,
    scheduleName: scheduleName.value,
    tagId: tag.value,
  }).then((res) => {
    if (res.data.success == true) {
      tableData.value = res.data.data.records;
      current.value = res.data.data.current;
      size.value = res.data.data.size;
      total.value = res.data.data.total;
      // 在数据更新后触发刷新header事件
      emitter.emit('refreshHeader')
    }
  });
}
getTableData();

function getDuration(start, end) {
  if (!start || !end) return "-";
  const startDate = new Date(start);
  const endDate = new Date(end);
  let diff = Math.max(0, endDate - startDate);
  // 处理小于1分钟的情况（1分钟=60000毫秒）
  if (diff < 60000) {
    return "0时1分";
  }
  const hours = Math.floor(diff / (1000 * 60 * 60));
  const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
  return `${hours}时${minutes}分`;
}

// 重置查询条件
const reset = () => {
  scheduleName.value = "";
  pickDate.value = "";
  tag.value = null;
  startDate.value = null;
  endDate.value = null;
  getTableData();
};

// 对话框是否显示
const dialogVisible = ref(false);
const isEdit = ref(false);
const isDetail = ref(false);

// 表单引用
const formRef = ref(null);

// 规则校验
const rules = {
  username: [
    {
      required: true,
      message: "用户名不能为空",
      trigger: "blur",
    },
  ],
  password: [
    {
      required: true,
      message: "密码不能为空",
      trigger: "blur",
    },
  ],
  rePassword: [
    {
      required: true,
      message: "确认密码不能为空",
      trigger: "blur",
    },
  ],
};

// 表单数据
const formData = reactive({
  id: null,
  scheduleName: "",
  tagId: null,
  pastId: null,
  scheduleDes: "",
  feeling: 3,
  reward: 0,
  rewardDes: "",
  motivation : "",
  createTime : null,
  endTime : null
});

//标签列表
const options = ref([]);

function formatDate(date) {
  if (!date) return "";
  const d = new Date(date);
  const pad = (n) => (n < 10 ? "0" + n : n);
  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${pad(
    d.getHours()
  )}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`;
}

// 处理提交
const handleSubmit = async () => {
  if (!formData.scheduleName) {
    alert("请填写必要信息");
    return;
  }

  try {
    const submitData = { ...formData };
    if (isEdit.value) {
      submitData.createTime = formatDate(formData.createTime);
      submitData.endTime = formatDate(formData.endTime);
    }
    delete submitData.tagName;
    console.log("提交数据：", submitData);
    if (isEdit.value) {
      const res = await updateSchedule(submitData);
      console.log("输出：", res);
      if (res.data.success) {
        // await fetchScheduleList();
        dialogVisible.value = false;
        // 重新请求分页接口，渲染数据
        getTableData();
        handleSuccess()
      } else {
        throw new Error(res.data.errorCode || "更新失败");
      }
    } else {
      const res = await createSchedule(submitData);
      console.log("输出：", res);
      if (res.data.success) {
        // await fetchScheduleList();
        dialogVisible.value = false;
        // 重新请求分页接口，渲染数据
        getTableData();
        handleSuccess()
      } else {
        throw new Error(res.data.errorCode || "创建失败");
      }
    }
  } catch (error) {
    console.error("Submit Error:", error);
    if (isEdit.value) {
      const index = tableData.value.findIndex(
        (item) => item.id === formData.id
      );
      if (index !== -1) {
        tableData.value[index] = { ...formData };
      }
    } else {
      const newId = Math.max(...tableData.value.map((item) => item.id), 0) + 1;
      const now = new Date();
      tableData.value.push({
        ...formData,
        id: newId,
        createTime: now.toLocaleString(),
        updateTime: now.toLocaleString(),
      });
    }
    dialogVisible.value = false;
  }
};

// 打开弹窗
const openDialog = (item = null) => {
  isEdit.value = !!item;
  if (item) {
    Object.assign(formData, item);
    // // 转换为 Date 对象，Element Plus 选择器才能正常显示
    // if (item.createTime)
    //   formData.createTime = new Date(item.createTime.replace(/-/g, "/"));
    // if (item.endTime)
    //   formData.endTime = new Date(item.endTime.replace(/-/g, "/"));
  } else {
    resetForm();
  }
  dialogVisible.value = true;
};
// 重置表单
const resetForm = () => {
  formData.id = null;
  formData.scheduleName = "";
  formData.tagId = null;
  formData.pastId = null;
  formData.motivation = "";
  formData.createTime = null;
  formData.endTime = null;
  formData.scheduleDes = "";
  formData.feeling = "1";
  formData.reward = 0
  formData.rewardDes = ""
};
// 处理编辑
const handleEdit = (row) => {
  openDialog(row);
};
// 处理详情
const handleDetail = (row) => {
  Object.assign(formData, row);
  isDetail.value = true;
};

// 处理删除
const handleDelete = async (id) => {
  if (confirm("确定要删除这条日程吗？")) {
    try {
      const res = await deleteSchedule(id);
      if (res.code === 200) {
        await fetchScheduleList();
      } else {
        throw new Error(res.msg || "删除失败");
      }
    } catch (error) {
      console.error("Delete Error:", error);
      const index = tableData.value.findIndex((item) => item.id === id);
      if (index !== -1) {
        tableData.value.splice(index, 1);
      }
    }
  }
};


const querySearch = async (queryString, cb) => {
  try {
    // 如果没有选择标签，不显示建议
    if (!formData.tagId) {
      cb([]);
      return;
    }
    
    // 调用推荐接口
    const res = await getRecommend({
      tagId: formData.tagId,
      scheduleName: queryString
    });
    
    if (res.data.success) {
      const suggestions = res.data.data.map(item => ({
        value: item.recordName,
        id: item.id
      }));
    cb(suggestions);
    } else {
      cb([]);
    }
  } catch (error) {
    console.error('Search Error:', error);
    cb([]);
  }
};

const queryMotivationSearch = async (queryString, cb) => {
  try {
    // 调用推荐接口，tagId 固定为 0
    const res = await getRecommend({
      tagId: 0,
      scheduleName: queryString
    });
    
    if (res.data.success) {
      const suggestions = res.data.data.map(item => ({
        value: item.recordName,
        id: item.id
      }));
    cb(suggestions);
    } else {
      cb([]);
    }
  } catch (error) {
    console.error('Search Error:', error);
    cb([]);
  }
};

const handleSelect = (item) => {
  formData.scheduleName = item.value;
};

const handleMotivationSelect = (item) => {
  formData.motivation = item.value;
};

const handleInput = (value) => {
  if (value && formData.tagId) {
    querySearch(value, (suggestions) => {
      // 这里可以处理建议列表，如果需要的话
    });
  }
};

const handleMotivationInput = (value) => {
  if (value && formData.tagId) {
    queryMotivationSearch(value, (suggestions) => {
      // 这里可以处理建议列表，如果需要的话
    });
  }
};

// 生成随机金币数
const isAnimating = ref(false)
const hasGenerated = ref(false)

const generateRandomReward = async () => {
  if (hasGenerated.value) {
    ElMessage.warning('每次只能生成一次金币')
    return
  }
  
  isAnimating.value = true
  hasGenerated.value = true
  
  try {
    // 调用推荐接口
    const res = await getPoint(formData.tagId)
    if (res.data.success) {
      const pointVo = res.data.data
      formData.reward = pointVo.point
      formData.rewardDes = pointVo.description
    } else {
      console.error('Get Point Error:', res.data.message)
      hasGenerated.value = false
      ElMessage.warning(res.data.message || '获取积分失败')
    }
    handleSuccess()
    emitter.emit('refreshHeader')
  } catch (error) {
    console.error('Get Point Error:', error)
    hasGenerated.value = false
    ElMessage.error('获取积分失败')
  }

  // 动画结束后重置状态
  setTimeout(() => {
    isAnimating.value = false
  }, 1000)
}

// 在关闭弹窗时重置状态
const handleClose = () => {
  hasGenerated.value = false
  formData.reward = 0
  formData.rewardDes = ""
  dialogVisible.value = false
}

// 在打开弹窗时重置状态
const handleOpen = () => {
  hasGenerated.value = false
  formData.reward = 0
  formData.rewardDes = ""
  dialogVisible.value = true
}

// 在数据更新后触发事件
const handleSuccess = () => {
  // ... existing success handling code ...
  emitter.emit('refreshHeader')
}
</script>

<style scoped>
.demo-rate-block {
  padding: 30px 0;
  text-align: center;
  border-right: solid 1px var(--el-border-color);
  display: inline-block;
  width: 49%;
  box-sizing: border-box;
}
.demo-rate-block:last-child {
  border-right: none;
}
.demo-rate-block .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}

/* 禁用下拉框所有动画效果 */
:deep(.el-autocomplete-suggestion) {
  transition: none !important;
}
:deep(.el-autocomplete-suggestion__list) {
  transition: none !important;
}
:deep(.el-autocomplete-suggestion__wrap) {
  transition: none !important;
}
:deep(.el-popper) {
  transition: none !important;
}
:deep(.el-popper__arrow) {
  transition: none !important;
}

/* 禁用加载动画 */
:deep(.no-loading .el-autocomplete-suggestion__loading) {
  display: none !important;
}

.reward-container {
  display: flex;
  align-items: center;
  gap: 12px;
}

.reward-btn {
  width: 80px;
  height: 32px;
  font-size: 13px;
  font-weight: 500;
  color: #fff;
  background: linear-gradient(45deg, #6C5CE7, #A8A4FF);
  border: none;
  border-radius: 16px;
  box-shadow: 0 2px 8px rgba(108, 92, 231, 0.3);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  padding: 0;
  line-height: 32px;
}

.reward-btn::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.reward-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(108, 92, 231, 0.4);
  background: linear-gradient(45deg, #7B68EE, #B8B4FF);
}

.reward-btn:hover::after {
  opacity: 1;
}

.reward-btn:active {
  transform: translateY(1px);
  box-shadow: 0 2px 4px rgba(108, 92, 231, 0.2);
}

.reward-value-wrapper {
  position: relative;
  min-width: 50px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border-radius: 6px;
  padding: 0 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

.reward-value {
  font-size: 18px;
  font-weight: bold;
  color: #6C5CE7;
  min-width: 30px;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.reward-value-wrapper.animate {
  animation: popIn 0.5s ease-out;
}

.reward-value-wrapper.animate .reward-value {
  animation: numberPop 0.5s ease-out;
}

@keyframes popIn {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes numberPop {
  0% {
    transform: scale(0.5);
    opacity: 0;
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.reward-tip {
  font-size: 13px;
  color: #909399;
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: 4px;
}

.reward-tip .el-icon {
  font-size: 14px;
  color: #6C5CE7;
}
</style>